<template>
	<div class="selectView">
		<div class="search-box">
			<van-icon name="search" />
			<input type="text" v-model="search" placeholder="请输入名字搜索" @keyup.enter="handleSearch" />
		</div>
		<div class="content-box" v-if="departmentList.length">
			<div class="slide-wrapper">
				<div class="slide-item" @click="setDepart(index)" :class="{ active: curDepart == index }" v-for="(item, index) in departmentList" :key="index">
					{{ item.name }}
				</div>
			</div>
			<div class="content-page">
				<van-checkbox-group v-model="result" checked-color="#50b1c1" icon-size="15px">
					<div class="page-box" v-loading="loading">
						<div class="title">{{ departmentList[curDepart].name }}</div>
						<div class="select-wrapper" v-if="searchList.length">
							<van-checkbox :name="item.id" v-for="(item, index) in searchList" :key="index">{{ item.nickname }}</van-checkbox>
						</div>
						<div class="select-wrapper" v-else>
							<van-checkbox :name="item.id" v-for="(item, index) in applyList" :key="index">{{ item.nickname }}</van-checkbox>
						</div>
					</div>
				</van-checkbox-group>
				<div class="submit" @click="submit">确认</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from "vant";
	import { mapGetters, mapMutations } from "vuex";
	export default {
		name: "selectView",
		data() {
			return {
				result: [],
				departmentList: [],
				applyList: [],
				curDepart: 0,
				loading: false,
				searchList: [],
				search: "",
			};
		},
		mounted() {
			this.getDepartment();
		},
		computed: {
			...mapGetters(["resultList", "searchForm"]),
		},
		methods: {
			...mapMutations(["set_resultList", "SET_SEARCH"]),
			getDepartment() {
				this.$api.department().then((res) => {
					if (res.code == 1) {
						this.departmentList = res.data;
						this.getApply();
					}
				});
			},
			getApply() {
				this.loading = true;
				this.$api
					.apply_users({
						department_id: this.departmentList[this.curDepart].id,
					})
					.then((res) => {
						this.loading = false;
						if (res.code == 1) {
							this.applyList = res.data;
						}
					});
			},
			setDepart(index) {
				this.curDepart = index;
				this.getApply();
			},
			handleSearch() {
				if (!this.search) {
					this.searchList = [];
					return;
				}
				this.searchList = this.applyList.filter((item) => item.nickname.includes(this.search));
			},
			submit() {
				const obj = { ...this.searchForm, user_id: this.result.join(",") };
				this.$bus.$emit("approvalList:search", obj);
				this.SET_SEARCH(obj);
				this.$router.go(-1);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.selectView {
		position: relative;
		z-index: 2;
		min-height: 100vh;
		padding-top: 0.37rem;
		background-color: #f6f6f6;
		// background: linear-gradient(to bottom, #c4e1e6, #f6f6f6, #f6f6f6);

		.search-box {
			width: 9.2rem;
			background: #fff;
			margin: 0 auto;
			border-radius: 4px;
			height: 0.91rem;
			padding: 0 0.35rem;
			display: flex;
			align-items: center;
			margin-bottom: 0.37rem;

			.van-icon {
				font-size: 16px;
				margin-right: 0.16rem;
			}

			input {
				flex: 1;
				line-height: 0.91rem;
			}
		}

		.content-box {
			display: flex;
			align-items: flex-start;

			.slide-wrapper {
				width: 3.28rem;
				min-height: calc(100vh - 1.55rem);
				background-color: #eeeeee;

				.slide-item {
					line-height: 23px;
					font-size: 15px;
					font-weight: bold;
					padding: 0.43rem 0.4rem;

					&.active {
						color: #fff;
						background-color: #50b1c1;
					}
				}
			}

			.content-page {
				min-height: calc(100vh - 1.55rem);
				background-color: #fff;
				flex: 1;
				padding-left: 0.51rem;
				padding-top: 0.53rem;

				.page-box {
					height: calc(100vh - 1.55rem - 0.53rem - 0.53rem - 0.53rem - 0.93rem);
					overflow-y: auto;

					.title {
						font-size: 15px;
						font-weight: bold;
						padding-left: 0.29rem;
						border-left: 2px solid #50b1c1;
						margin-bottom: 0.99rem;
					}

					.select-wrapper {
						::v-deep .van-checkbox {
							margin-bottom: 0.88rem;
						}
					}
				}

				.submit {
					width: 5.87rem;
					height: 0.93rem;
					margin-top: 0.53rem;
					text-align: center;
					line-height: 0.93rem;
					background-color: #50b1c1;
					color: #fff;
					border-radius: 4px;
				}
			}
		}
	}
</style>
